<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getImageUrl } from '@/utils/tools'
import { reqTableData, reqCountData, reqChartData } from '@/apis/home'
import type { ITableDataItem, ICountDataItem } from '@/apis/types/home'
// defineOptions({ name: 'NewView' })
// const { proxy } = getCurrentInstance() as ComponentInternalInstance;  // 获取当前vue3实例 proxy.$api

const tableData = ref<ITableDataItem[]>([])
const getTableData = async () => {
  // const res = await proxy?.$api.getTableData();
  const res = await reqTableData()
  tableData.value = res.data
}

const countData = ref<ICountDataItem[]>([])
const getCountData = async () => {
  const res = await reqCountData()
  countData.value = res.data
}
// 折线图和柱状图共用的公共配置
const xOptions = reactive({
  // x、y轴文字颜色
  textStyle: {
    color: '#999'
  },
  // 图例
  legend: {},
  // 网格线  偏移量
  grid: {
    right: '10%'
  },
  series: [{}], // 图标数据
  // 鼠标提示框
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: '#17b3a3'
      }
    },
    axisLabel: {
      interval: 0,
      color: '#333'
    }
  },

  yAxis: [
    {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#17b3a3'
        }
      }
    }
  ]
  // color: ['#17b3a3', '#000', '#17b3a3', 'red', '#17b3a3', '#f0f'],
})
const xOptions2 = reactive({
  // x、y轴文字颜色
  textStyle: {
    color: '#999'
  },
  // 图例
  legend: {},
  // 网格线  偏移量
  grid: {
    left: '15%'
  },
  series: [{}], // 图标数据
  // 鼠标提示框
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: '#17b3a3'
      }
    },
    axisLabel: {
      interval: 0,
      color: '#333'
    }
  },

  yAxis: [
    {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#17b3a3'
        }
      }
    }
  ]
  // color: ['#17b3a3', '#000', '#17b3a3', 'red', '#17b3a3', '#f0f'],
})
// 饼图的配置
const pieOptions = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {},
  grid: { left: '20%' },
  // color: ['#17b3a3', '#000', '#17b3a3', 'red', '#17b3a3', '#f0f'],
  series: [
    {
      type: 'pie',
      // center: ['35%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
      // radius: '50%',
      data: []
    }
  ]
})

const echartRef = ref<HTMLElement>()
const echartRef2 = ref<HTMLElement>()
const echartRef3 = ref<HTMLElement>()
const observer = ref<ResizeObserver>() // 监听echartRef的dom变化
const getChartData = async () => {
  const {
    // @ts-ignore
    data: { orderData, userData, videoData }
  } = await reqChartData()
  xOptions.xAxis.data = orderData.date
  xOptions.series = Object.keys(orderData.data[0]).map((key) => {
    return {
      name: key,
      type: 'line',
      data: orderData.data.map((item: any) => item[key])
    }
  })
  const oneEchart = echarts.init(echartRef.value)
  oneEchart.setOption(xOptions)

  // 图标2
  xOptions2.xAxis.data = userData.map((item: any) => item.date)
  xOptions2.series = [
    {
      name: '新增用户数',
      type: 'bar',
      data: userData.map((item: any) => item.new)
    },
    {
      name: '活跃用户数',
      type: 'bar',
      data: userData.map((item: any) => item.active)
    }
  ]

  const oneEchart2 = echarts.init(echartRef2.value)
  oneEchart2.setOption(xOptions2)

  // 图标3
  // pieOptions.series[0].data = videoData
  pieOptions.series = [
    {
      type: 'pie',
      data: videoData
    }
  ]
  const oneEchart3 = echarts.init(echartRef3.value)
  oneEchart3.setOption(pieOptions)

  // 监听echartRef的dom变化，执行回调函数
  observer.value = new ResizeObserver(() => {
    oneEchart.resize()
    oneEchart2.resize()
    oneEchart3.resize()
  })
  if (echartRef.value) {
    observer.value.observe(echartRef.value)
  }
}

onMounted(() => {
  getTableData()
  getCountData()
  getChartData()
})
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img :src="getImageUrl('user')" class="avatar" />
          <div class="user-info">
            <h2>Admin</h2>
            <p>超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录的时间：<span>2024-08-13</span></p>
          <p>上次登录的地点：<span>北京</span></p>
        </div>
      </el-card>
      <el-card shadow="hover" class="table">
        <el-table :data="tableData">
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="todayBuy" label="今日购买" />
          <el-table-column prop="monthBuy" label="本月购买" />
          <el-table-column prop="totalBuy" label="总购买" />
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="count">
        <el-card shadow="hover" :body-style="{ display: 'flex', padding: 0 }" v-for="item in countData" :key="item.name">
          <component :is="item.icon" class="icons" :style="{ background: item.color }" />
          <div class="detail">
            <p class="num">{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <el-card class="chart" shadow="hover">
        <div ref="echartRef" style="height: 280px"></div>
      </el-card>
      <div class="chart2">
        <el-card>
          <div ref="echartRef2" style="height: 240px"></div>
        </el-card>
        <el-card>
          <div ref="echartRef3" style="height: 240px"></div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.user {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;

  .avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    padding-bottom: 10px;
  }

  .user-info {
    margin-left: 20px;

    h2 {
      font-size: 24px;
      margin-bottom: 15px;
    }

    p {
      font-size: 16px;
      color: #999;
      margin-bottom: 5px;
    }
  }
}

.table {
  margin-top: 20px;
}

.count {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .el-card {
    width: 32%;
    margin-bottom: 20px;

    .icons {
      width: 80px;
      height: 80px;
      color: #fff;
      font-size: 30px;
      text-align: center;
      line-height: 80px;
      border-radius: 10px;
    }

    .detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .num {
        font-size: 30px;
        color: #333;
        margin-bottom: 10px;
      }

      .txt {
        font-size: 16px;
        color: #999;
        margin-left: 5px;
      }
    }
  }
}

.chart2 {
  display: flex;
  justify-content: space-between;

  .el-card {
    margin-top: 20px;
    width: 49%;
    height: 260px;
  }
}

.login-info {
  margin-top: 20px;

  p {
    font-size: 16px;
    color: #999;
    margin-bottom: 10px;
  }

  span {
    margin-left: 30px;
    color: #666;
  }
}
</style>
